<template>
	<view class="content">
		<view class="flex-item">
			<view class="od-item flex-item-i">
				<view class="flex-new-item">
					<view class="ico"></view>
					<view class="text">您的案子以什么方式处理的<span style="color: #FF0000;">*</span></view>
				</view>
				<view class="item-right">
					<view class="service-list">
						<view class="service-item flex1" style="border-radius: 38rpx;"
							:class="moneyparams.chuli_type == '法院判决' ? 'active' : ''"
							@click="moneyparams.chuli_type = '法院判决'">法院判决</view>
						<view class="service-item flex1" style="border-radius: 38rpx;"
							:class="moneyparams.chuli_type == '和解/调解' ? 'active' : ''"
							@click="moneyparams.chuli_type = '和解/调解'">和解/调解</view>
						<view class="service-item flex1" style="border-radius: 38rpx;"
							:class="moneyparams.chuli_type == '其他方式' ? 'active' : ''"
							@click="moneyparams.chuli_type = '其他方式'">其他方式</view>
					</view>
				</view>
			</view>
			<view class="od-item flex-item-i">
				<view class="flex-new-item">
					<view class="ico"></view>
					<view class="">您主张的欠款本金有多少获得支持<span style="color: #FF0000;">*</span></view>
				</view>
				<view class="item-right">
					<view class="service-list">
						<view class="service-item flex1" style="border-radius: 38rpx;"
							:class="moneyparams.chuli_money == '全部支持' ? 'active' : ''"
							@click="checkno('全部支持')">全部支持</view>
						<view class="service-item flex1" style="border-radius: 38rpx;"
							:class="moneyparams.chuli_money == '部分支持' ? 'active' : ''"
							@click="checkno('部分支持')">部分支持</view>
						<view class="service-item flex1" style="border-radius: 38rpx;"
							:class="moneyparams.chuli_money == '全部不支持' ? 'active' : ''"
							@click="checkno('全部不支持')">全部不支持</view>
					</view>
				</view>
			</view>
			<view class="od-item flex-item-i">
				<view class="flex-new-item">
					<view class="ico"></view>
					<view  style="display: flex;justify-content: space-between;width: 100%;">
					   <view>
						   {{swit_flg(moneyparams.chuli_money)[0]}}<span style="color: #FF0000;">*</span>
					   </view>
					   <view v-if="moneyparams.chuli_money == '全部不支持'" @click="directs(6)" class="symbol"></view>
					</view>
					<!-- <view class="require">委托人这次收回了多少钱</view> -->
				</view>
				<view v-if="moneyparams.chuli_money=='全部不支持'" style="color: #7A7171;font-size: 24rpx;margin-left: 20rpx;">
				</view>
				<view class="item-right">
					<view class="input" >
						<view :class="moneyparams.money ? '' : 'green-color'">￥</view>
						<input type="number" placeholder="输入金额" v-model="moneyparams.money" @input="inputChange($event,'money')" pattern="[0-9]*" />
					</view>
				</view>
			</view>
			<view class="od-item flex-item-i">
				<view class="flex-new-item-adi">
					<view class="flex-new-item">
						<view class="ico"></view>
						<view class="adi-symbol">
							<!--  -->
							<!-- <view class="adi">委托人这次应付投资利益</view> -->
							<view class="adi" style="font-size: 28rpx;">{{swit_flg(moneyparams.chuli_money)[1]}}</view>
							<view @click="directs(0)" class="symbol">
								<!-- <image src="@/static/img/question.png"> -->
							</view>
						</view>
					</view>
				</view>
				<view class="item-right">
					<view class="input" style="border: none;" :class="getMoney&&getMoney>=0?'red':'green-color'">
						<view >￥</view>
						<input type="number" style="color: #ff0000;" placeholder="待计算" :disabled="true" v-model="getMoney" />
					</view>
				</view>
			</view>


		</view>
		<view class="flex-item" style="margin-top: 10px;" v-if="moneyparams.chuli_money!='全部支持'">
		<view  class="flex-item" style="margin-top: 15rpx;" >
			<view class="od-item flex-item-i" style="padding: 30rpx 0 0 0;" v-if="moneyparams.chuli_money =='部分支持'">
				<view class="flex-new-item adi-symbol">
					<view style="display: flex;">
					<view class="ico"></view>
					<view>{{swit_flg1(moneyparams.chuli_type)[0]}}<span style="color: #FF0000;">*</span></view>
					</view>
					<!-- <view @click="directs(4)" class="symbol" ></view> -->
					<!-- <view class="require">委托人这次收回了多少钱</view> -->
				</view>
				<view class="item-right">
					<view class="input">
						<view :class="moneyparams.yuan_money ? '' : 'green-color'">￥</view>
						<input type="number" placeholder="输入金额" v-model="moneyparams.yuan_money" @input="inputChange($event,'yuan_money')" pattern="[0-9]*" />
					</view>
				</view>
			</view>
			<view class="od-item flex-item-i" style="padding: 30rpx 0 0 0;"  v-if="moneyparams.chuli_money =='部分支持'">
					<view class="flex-new-item adi-symbol" style="height:100%;">
						<view style="display: flex;">
							<view class="ico"></view>
							<view>{{swit_flg1(moneyparams.chuli_type)[1]}}<span style="color: #FF0000;">*</span></view>
						</view>
						<!-- <view @click="directs(1)" class="symbol" ></view> -->
					</view>
					<view class="item-right">
						<view class="input" >
							<view :class="moneyparams.yuan_money ? '' : 'green-color'">￥</view>
							<input type="number" placeholder="输入金额" v-model="moneyparams.hejie_money" @input="inputChange($event,'hejie_money')" pattern="[0-9]*" />
						</view>
					</view>
				</view>
			<view class="od-item flex-item-i" style="padding: 30rpx 30rpx 0 0;"  v-if="moneyparams.chuli_money =='部分支持'||moneyparams.chuli_money=='全部不支持'">
					<view class="flex-new-item">
						<view class="ico"></view>
						<view>{{swit_flg1(moneyparams.chuli_type)[2]}}</view>
						<!-- <view class="require">委托人这次收回了多少钱</view> -->
					</view>
					<view class="item-right">
						<view class="input" style="border: none;">
							<view>￥</view>
							<input type="number" placeholder="输入金额" :disabled="true" v-model="moneyparams.touzi_money" @input="inputChange($event,'touzi_money')" pattern="[0-9]*" />
							<!-- <image src="../../../static/img/icon/write.png" style="width: 19rpx;height: 20rpx;"></image> -->
						</view>
					</view>
				</view>
			<view class="od-item flex-item-i" style="padding: 30rpx 0 0 0;"  v-if="moneyparams.chuli_money =='部分支持'||moneyparams.chuli_money=='全部不支持'">
					<view class="flex-new-item">
						<view class="ico"></view>
						<view class="adi-symbol">
							<view class="adi" style="font-size: 28rpx;">{{swit_flg1(moneyparams.chuli_type)[3]}}</view>
							<view @click="directs(1)" class="symbol" >
							</view>
						</view>
						<!-- <view style="height: 66rpx;color: #FF5353;">{{swit_flg1(moneyparams.chuli_type)[3]}}<span style="color: #FF0000;">*</span></view>
						<view class="require">委托人这次收回了多少钱</view> -->
					</view>

					<view class="item-right">
						<view class="input" style="border: none;" :class="moneyparams.sunshi_money?'red':''">
							<view>￥</view>
							<input type="number" style="color: #ff0000;" placeholder="待计算" :disabled="true" v-model="moneyparams.sunshi_money" />
							<!-- <image src="../../../static/img/icon/write.png" style="width: 19rpx;height: 20rpx;"></image> -->
						</view>
					</view>
				</view>
		</view>
		</view>
		<view class="flex-item" style="margin-top: 10px;">
			<view class="od-item marginbottom10 flex-item">
				<view class="od-item flex-item-i" style="padding: 30rpx 0rpx 0 0rpx;">
				<view class="flex-new-item">
					<view class="ico"></view>
					<view class="adi-symbol">
						<view class="adi" style="font-size: 28rpx;">您逾期付款的违约金*
						<span style="color:#808080">
							(如无,请填写0)
						</span></view>
						<view @click="directs(2)" class="symbol" >
						</view>
					</view>
				</view>
				<view class="item-right">
					<view class="input">
						<view :class="moneyparams.weiyue_money?'red':'green-color'">￥</view>
						<input type="number" placeholder="输入金额" style="color: #FF0000;" v-model="moneyparams.weiyue_money" @input="inputChange($event,'weiyue_money')" pattern="[0-9]*" />
					</view>
				</view>
				</view>
			</view>
			</view>
		<view class="od-item zdyma">
			<view class="item-tip require">付款方式</view>
			<view class="item-right">
				<view class="pay-list" style="width: 100%; display: flex; flex-wrap: wrap;">
					<view class="pay-item" :class="payMethod == '微信' ? 'active' : ''" @click="payMethod = '微信'">
						<view class="image-wrapper"><image src="@/static/img/pay-icon1.png" mode="aspectFit"></image></view>
						微信
					</view>
					<view class="pay-item" :class="payMethod == '支付宝' ? 'active' : ''" @click="payMethod = '支付宝'">
						<view class="image-wrapper"><image src="@/static/img/pay-icon2.png" mode="aspectFit"></image></view>
						支付宝
					</view>
					<view class="pay-item" :class="payMethod == '余额' ? 'active' : ''" @click="payMethod = '余额'">
						<view class="image-wrapper"><image src="@/static/img/pay-icon3.png" mode="aspectFit"></image></view>
						余额{{user_money}}
					</view>
					<view class="pay-item" :class="payMethod == '朋友代付' ? 'active' : ''" @click="payMethod = '朋友代付'">
						<view class="image-wrapper"><image src="@/static/img/pay-icon4.png" mode="aspectFit"></image></view>
						朋友代付
					</view>
				</view>
			</view>
		</view>
		<view style="display: flex;align-items: center;margin: 10rpx 26rpx;" @click.stop="isagree">
			<image src="../../../static/img/icon/radio.png" v-if="is_agree==false"  style="width: 30rpx;height: 30rpx;"></image>
			<image src="../../../static/img/icon/radioed.png" v-else style="width: 30rpx;height: 30rpx;"></image>
			<view style="margin-left: 10rpx;">我已与投资人确认付款金额</view>
		</view>
		<view class="justbtn">
			<view class="title">
				合计<text>￥{{moneyparams.total_money}}</text>
			</view>
			<view class="rbutton">
				<button class="botton" :disabled="disabled" @click="confirmPayToInvestor">
					我要支付
				</button>
			</view>
		</view>
		<uni-popup ref="direces" type="center">
			<view class="popup-direc-box">
				<view class="bot-title">
					<view class="title-txt">{{showmodel.title}}</view>
					<view class="title-close" @click="close">
						<view class="image-wrapper"><image src="@/static/img/close.png" mode="aspectFit"></image></view>
					</view>
				</view>
				<view class="od-item flex-item-i">
					<!-- <view class="flex-new-item">
						<view class="ico"></view>
						<view class="blod">您这次应付投资收益</view>
					</view> -->
					<view class="item-right">
						<view class="item-txt">
							<text class="input_icon">¥</text>
							<text class="text_icon">{{showmodel.cont}}</text>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
import { mapGetters, mapMutations } from 'vuex';
export default {
	data() {
		return {
			moneyparams:{
			},
			is_agree:false,//是否与投资人确认付款金额
			payMethod: '微信', //付款方式
			money:'',
			user_money:'',
			order_id: '',
			disabled:true,
			reds:0,
			info: {
				order: {}
			},
			showmodel:{},
			checks:0,
			listshow:[
				{title:'您这次应付投资收益',cont:'您这次收回的钱x30%'},
				{title:'您应付的投资收益损失为',cont:'您起诉的欠款本金、利息、违约金、立案受理费、律师费等全部金额×30%'},
				{title:'您逾期付款的违约金',cont:'您未付金额×万分之六×逾期天数'},
				{title:'您应付的投资费用损失为',cont:'投资人已支付的投资费用'},
				{title:'您应付的投资费用损失为',cont:'投资人已支付的投资费用'},
				{title:'您应付的投资费用损失为',cont:'投资人已支付的投资费用'},
			    {title:'您起诉金额的总和',cont:'包括欠款本金、利息/违约金、立案受理费、律师费等'},
				{title:'您应付的投资收益损失',cont:'您起诉的欠款本金、利息、违约金、立案受理费、律师费等全部金额×30%'},
			]
		};
	},
	onLoad(params) {
		if (params.moneyparams) {
			this.moneyparams = JSON.parse(params.moneyparams);
			if(!this.moneyparams.total_money){
				this.moneyparams.total_money=0;
			}
		}
		if (params.money) {
			this.money = params.money;
		}
		if (params.user_money) {
			this.user_money = params.user_money;
		}

		if (params.order_id) {
			this.order_id = params.order_id;
			this.init();
		}

	},
	computed: {
		...mapGetters(['userInfo']),
		getMoney(){
			if(this.moneyparams.money!=''){
				let money=this.moneyparams.money*0.3
				this.moneyparams.price=money.toFixed(2)
				if(this.moneyparams.chuli_money=='全部不支持'){
					this.moneyparams.sunshi_money=this.moneyparams.touzi_money
					this.reds=1;
				}
				return money.toFixed(2)
			}
		},
	},
	methods: {
		checkno(e){
			if(e=='全部不支持'){
				this.checks = 1
			}else{
				this.checks = 0
			}
			this.moneyparams.chuli_money = e
			this.disabled=true;
			this.buttonyz();
		},
		directs(e){
			console.log(e);
			if(e==1&&this.moneyparams.chuli_money == '部分支持'){
				if(this.moneyparams.chuli_type== '法院判决'){
					this.showmodel=this.listshow[3]
				}else if(this.moneyparams.chuli_type== '和解/调解'){
					this.showmodel=this.listshow[4]
				}else if(this.moneyparams.chuli_type== '其他方式'){
					this.showmodel=this.listshow[5]
				}
			} else if(this.moneyparams.chuli_money == '全部不支持' && this.moneyparams.chuli_type == '法院判决' && e == 1){
				this.showmodel=this.listshow[3]
			} else if(this.moneyparams.chuli_money == '全部不支持' && this.moneyparams.chuli_type == '和解/调解' && e == 1){
				this.showmodel=this.listshow[4]
			}else if(this.moneyparams.chuli_money == '全部不支持'){
				console.log(e)
				if(e!=0){
					if(e == 1){
						this.showmodel=this.listshow[5]
					}else{
						this.showmodel=this.listshow[e]
					}
				}else{
					this.showmodel=this.listshow[1]
				}

			}else{
				if(this.checks == 1){
					if(e!=0){
						this.showmodel=this.listshow[e]
					}else{
						this.showmodel=this.listshow[7]
					}
				}else {
					this.showmodel=this.listshow[e]
				}
			}
			this.$refs.direces.open('center')
		},
		async confirmPayToInvestor() {
			if(this.is_agree==false){
				uni.showToast({
					title:'需先同意与投资人确认付款金额',
					icon:'none',
					duration:1000
				})
				return;
			}
			let formData = {
				id: this.order_id,
				token: uni.getStorageSync('token'),
				type: 1, //1 = 付费给投资人 2= 投资人退款请求 3 = 投资人请求结算 4 添加服务 5 包年包月的续费 6付款给律师
				pay_type: this.payMethod,
				chuli_type:this.moneyparams.chuli_type,
				chuli_money:this.moneyparams.chuli_money,
				money:this.moneyparams.money,
				price:this.moneyparams.price,
				yuan_money:this.moneyparams.yuan_money,
				hejie_money:this.moneyparams.hejie_money,
				touzi_money:this.moneyparams.touzi_money,
				sunshi_money:this.moneyparams.sunshi_money,
				weiyue_money:this.moneyparams.weiyue_money,
				heji_money:this.moneyparams.total_money,
			};
			/* console.log(formData);
			return ; */
			let res = await this.$api('index.money', formData);
			if (res.code == 1) {
				let formDataPay = {
					order_id: res.data.order_id,
					payMethod: this.payMethod,
					fen: '',
					pay_type: 2,
					scene:2
				};
				let resPay = await this.$pay(formDataPay,true);
				if (resPay == 1) {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					});
					setTimeout(()=>{
						uni.navigateBack({})
					},2000)
				}
			}
		},
		swit_flg(n2){
			n2=n2!='全部不支持'? '1':'0'

			let obj={
				'0':['您起诉金额的总和是多少','您应付的投资收益损失为'],
				'1':['您这次收回了多少钱','您这次应付投资收益']
			}
			return obj[n2]
		},
		inputChange(e,type){
			if(e.detail.value){
				this.$nextTick(() => {
					// this[type] = e.detail.value.replace(/\D/g,'')
					this.$set(this.moneyparams,type,e.detail.value.replace(/\D/g,''))
					if(type=='hejie_money' || type=='yuan_money'){
						if(this.moneyparams.yuan_money!=''&&this.moneyparams.hejie_money!=''&&
						this.moneyparams.touzi_money!=''){
							let money=parseFloat(this.moneyparams.yuan_money)-parseFloat(this.moneyparams.hejie_money)
							money=(money/parseFloat(this.moneyparams.yuan_money)*parseFloat(this.moneyparams.touzi_money)).toFixed(2)
							this.moneyparams.sunshi_money = money || '0'
						}else{
							this.moneyparams.sunshi_money = '0'
						}
					}
					this.getTotalMoney();
				})
				this.buttonyz();
			}else{
				this.moneyparams.total_money = '0'
			}

		},
		isagree(){
			this.is_agree=!this.is_agree
			this.disabled=true;
			this.buttonyz()
		},
		buttonyz(){
			if(this.moneyparams.chuli_money=="全部支持"){
				if(this.is_agree&&this.moneyparams.money&&this.moneyparams.weiyue_money){
					this.disabled=false
				}else{
					this.disabled=true
				}
			}else if(this.moneyparams.chuli_money=="部分支持"){
				if(this.is_agree&&this.moneyparams.money&&this.moneyparams.weiyue_money&&this.moneyparams.yuan_money&&this.moneyparams.hejie_money){
					this.disabled=false
				}else{
					this.disabled=true
				}
			}else if(this.moneyparams.chuli_money=="全部不支持"){
				if(this.is_agree&&this.moneyparams.money&&this.moneyparams.weiyue_money){
					this.disabled=false
				}else{
					this.disabled=true
				}
			}
		},
		getTotalMoney(){
			if(this.moneyparams.price!=''&& this.moneyparams.weiyue_money!=''){
				let money=parseFloat(this.moneyparams.price)+parseFloat(this.moneyparams.weiyue_money)
				if(this.moneyparams.sunshi_money!=''&&this.moneyparams.chuli_money!='全部支持') money=money+parseFloat(this.moneyparams.sunshi_money)
				this.moneyparams.total_money=parseFloat(money).toFixed(2)
				return parseFloat(money).toFixed(2)
			}else{
				return 0
			}
		},

		close(){
			this.$refs.direces.close()
		},
		swit_flg1(n){
			let str=''
			switch(n){
				case '法院判决':
					str='法院判决支持的欠款本金金额是多少'
					break;
				case '和解/调解':
					str='您与欠款方和解时,欠款方同意偿还的欠款本金金额是多少'
					// n=1;
					break;
				case '其他方式':
					n=2;
					str='最后获得支持的欠款本金金额是多少'
					break;
				default:
					console.log(4);
					break;
			}
			let arr=['您原来主张的欠款本金金额是多少',
			str,
			'投资人已支付的投资费用','您应付的投资费用损失为'
			]
			return arr
		},
		async init() {
			let formData = {
				token: uni.getStorageSync('token')
			};
			let res = await this.$api('index.receipt', formData);
			this.info = res.data;

		},
	}
};
</script>

<style lang="scss" scoped>
	.red{
		color: #ff0000;
	}
	.green-color{
		color: #808080;
	}
	.symbol {
		z-index: 99;
		background: url(@/static/img/question.png);
		// background: red;
		background-size: cover;
		width: 30rpx;
		height: 30rpx;
	}
.adi-symbol {
	position: relative;
	width: 100%;
	display: flex;
	justify-content: space-between;
	// 标题文字
	.adi {
		// color: #FF5353;
		font-size: 26rpx;
	}
	// 问号图标
	.symbol {
		background: url(../../../static/img/question.png);
		background-size: cover;
		width: 30rpx;
		height: 30rpx;
	}
}
.pay-list {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	box-sizing: border-box;
	.pay-item {
		display: flex;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		border: 2rpx solid #eee;
		padding: 16rpx 10rpx;
		border-radius: 25px;
		background-color: #FFFFFF;
		margin-right: 20rpx;
		margin-bottom: 20rpx;
		text-align: center;
		width: calc((100% - 20rpx) / 2);
		margin-bottom: 20rpx;
		&:nth-of-type(2n) {
			margin-right: 0;
		}
		&.active {
			background-color: #FFFFFF;
			border-color: $uni-color-primary;
		}
		.image-wrapper {
			width: 40rpx;
			height: 40rpx;
			display: inline-block;
			margin-right: 10rpx;
			image {
				width: 100%;
				height: 100%;
			}
		}
	}
}
.justbtn{
	position: fixed;
	padding: 20rpx;
	bottom: 0;
	width: 100%;
	background-color: #FFFFFF;
	display: flex;
	justify-content: space-between;
	align-items: center;
	.title{
		color: #000000;
		font-size: 14px;
		text{
			color: rgb(255, 0, 0);
			font-weight: bold;
		}
	}
	.rbutton{
		.botton{
			width: 150px;
			height: 30px;
			line-height: 30px;
			border-radius: 6px;
			background: #FFC900;
			color: white;
			text-align: center;
			font-weight: 300;
			letter-spacing: 0.5px;
		}
	}
}
.flex-new-item{
    position: relative;
    height: 16px;
    display: flex;
    align-content: center;
    line-height: 16px;
    height: 16px;
}
.flex-new-item .ico{
	width: 6px;
	height: 6px;
	background: #000;
	border-radius: 25px;
	margin-right: 3px;
	margin-top: 10rpx;
}
.content{
	padding: 30rpx 0 140rpx;
	background-color: rgba(220,220,220,0.4);
}
.item-tip{
	margin: 12rpx 0;
}
// .require::after {
// 	content: '*';
// 	position: absolute;
// 	color: #f00;
// 	font-weight: normal !important;
// 	font-size: 30rpx;
// }
// .require::after {
//     position: absolute;
//    top: 0!important;
// }
.zdyma{
	margin: 0 26rpx;
	.require::after {
	    position: relative;
	   top: 0!important;
	}
}
.popup-direc-box{
	background: #FFFFFF;
	width: 660rpx;
	padding: 30rpx;
	border-radius: 30rpx;
	.bot-title{
		display: flex;
		align-items: center;
		.title-txt{
			flex: 1;
			text-align: center;
			padding: 20rpx;
			font-size: 28rpx;
			font-weight: bold;
		}
		.title-close{
			width: 80rpx;
			height: 80rpx;
			text-align: center;
			position: absolute;
			top: 0;
			right: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			.image-wrapper {
				width: 26rpx;
				height: 26rpx;
				vertical-align: middle;
				image {
					width: 100%;
					height: 100%;
				}
			}
		}



	}
	.flex-item-i{
		.flex-new-item{
			// margin-top:20rpx;
			.blod{
					font-weight: bold;
					// margin-top: 10rpx;
					margin-bottom: 10rpx;
				}
		}
		.item-right{
			margin-top: 10rpx;
			margin-bottom: 20rpx;
			color: #848484;
		}
	}
	.item-right{
		.item-txt{
			// color: red;
			margin-left: 9rpx;
			// margin-bottom: 20rpx;
			// margin-top: 10rpx;
			.dl1{
				display: flex;

			}
			// z-index: 7rpx;
		}
		.input_icon{
			margin-left: 7rpx;
		}
		.text_icon{
			margin-left: 10rpx;
		}

	}


}
//第一个弹窗的内容
.flex-item {
	margin: 0 26rpx;
	flex-direction: column;
	// padding: 30rpx;
	background: #FFFFFF;
	padding-bottom: 10rpx;
	border-radius: 24rpx;
	//每一项内容
	.flex-item-i{
		flex-direction: column;
		// margin-top: 30rpx;
		// margin-bottom: 30rpx;
		padding: 30rpx 26rpx 0 30rpx;
		.item-right{
			display: flex;
			align-items: center;
			//新改
			.input{
				margin-top: 20rpx;
				font-size: 26rpx;
				display: flex;
				align-items: center;
				width: 100%;
				height: 60rpx;
				border-radius: 12rpx;
				border: 1rpx solid #E0E0E0;
				padding-left: 17rpx;
				padding-right: 17rpx;
				input{
					width: 100%;
					height: 60rpx;
					font-size: 26rpx;
					margin-left: 10rpx;
					margin-right: 10rpx;
					letter-spacing: 1rpx;

				}
			}
		}
	}
	.service-list{
		margin-top: 24rpx;
	}
	//带付款图标的input空间
	.item-txt {
		position: relative;
	//付款文字样式
		.input_icon {
			position: absolute;
			font-size: 18rpx;
			top:20rpx;
			left: 10rpx;
			z-index: 8;
		}
	// input样式
		.ipt-border {
			margin-top: 18rpx;
			text-indent: 24rpx;//作缩进
		}
		// 计算input付款图标
		.computer_input {
			color: #a8a8a8;

			.ipt-border {
				border: none;
			}
		}

	}
}
</style>
